<template>
	<div class="content">
		<view class="tab-container">
			<view class="tab-headers">
				<view class="tab-header" :class="{ active: currentIndex === 0 }" @click="changeTab(0)">转入</view>
				<view class="tab-header" :class="{ active: currentIndex === 1 }" @click="changeTab(1)">转出</view>
			</view>
			<view class="tab-content">
				<div style="display: flex; align-items: center">
					<uni-data-checkbox
						mode="tag"
						v-model="selectType"
						:localdata="currentIndex == 0 ? sex : sex2"
						style="flex: 2; display: inline-block"
						@change="checkChange"
					></uni-data-checkbox>
					<div class="title-date">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">
									{{ date }}
									<uni-icons type="right" size="16" style="color: #b0b0b0"></uni-icons>
								</view>
							</picker>
						</view>
					</div>
				</div>
				<scroll-view scroll-y class="list-container" :scroll-top="scrollTop" @scrolltolower="loadMore">
					<div class="list">
						<view class="record-list-container">
							<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="jump(item)">
								<view class="record-header">
									<text class="record-header-text">{{ item.remark }}</text>
									<text class="amount2" :style="{ color: currentIndex == 0 && item.balanceStatus == 2 ? '#f02506' : '#b0b0b0' }">+{{ item.balance }}</text>
								</view>
								<view class="record-meta">
									<text>{{ item.dateStr }}</text>
									<text v-if="currentIndex == 1" :class="item.balanceStatus == 0 ? 'statusLose' : 'status'">{{statusCode2[item.balanceStatus]}}</text>
									<text v-else>{{ statusCode[item.balanceStatus] }}</text>
								</view>
								<div class="line"></div>
							</view>
						</view>
					</div>
					<view class="loading-status">
						<template v-if="loading">
							<uni-load-more status="loading"></uni-load-more>
						</template>
						<template v-else-if="noMoreData">
							<text class="no-more">没有更多数据了</text>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
	</div>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			date: currentDate,
			currentIndex: 0, // 当前选中的选项卡索引，初始为0即选中第一个
			selectType: 'all',
			page: 1, // 当前页码
			pageSize: 5, // 每页条数
			loading: false, // 加载状态
			noMoreData: false, // 是否无更多数据
			scrollTop: 0, // 滚动位置,
			total: 0,
			sex: [
				{
					text: '全部',
					value: 'all'
				},
				{
					text: '分红',
					value: 1
				},
				{
					text: '佣金',
					value: 2
				}
			],
			sex2: [
				{
					text: '全部',
					value: 'all'
				},
				{
					text: '审批中',
					value: 0
				},
				{
					text: '成功',
					value: 1
				},
				{
					text: '失败',
					value: 2
				}
			],
			statusCode: {
				1: '待结算',
				2: '已结算'
			},
			statusCode2: {
				0: '失败',
				1: '成功',
				2: '审核中'
			},
			
			
			recordList2: [
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				},
				{
					remark: '荷花池250120期分红',
					balance: '+1000.54',
					dateStr: '2022-09-11 08:55',
					balanceStatus: '已结算'
				}
			],
			recordList: [
				
			
				
			]
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad() {
		this.initData();
	},
	methods: {
		jump(item) {
			if (item.remark == '申请提现') {
				uni.navigateTo({
					url:`/mineComponentPackage/component/schedule/index?withdrawalId=${item.relationId}`
				})
			} else {
				uni.navigateTo({
					url:`/mineComponentPackage/component/check/base?withdrawalId=${item.relationId}`
				})
				
			}
		  	
		},
		changeTab(index) {
			this.currentIndex = index;
			this.recordList = [];
			this.page = 1;
			this.selectType = 'all';
			uni.showLoading({
				title: '加载中'
			});
			this.fetchData();
		},
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		},
		// 初始化数据
		async initData() {
			try {
				this.loading = true;
				this.fetchData();
			} finally {
				this.loading = false;
			}
		},

		// 加载更多
		async loadMore() {
			// if (this.loading || this.noMoreData) return;

			try {
				this.loading = true;
				this.page = this.page + 1;
				this.fetchData();
			} catch (e) {
			} finally {
				this.loading = false;
			}
		},

		// 请求数据（需替换为真实API）
		async fetchData() {
			const selectYear = this.date?.split('-')?.[0];
			const selectMonth = this.date?.split('-')?.[1];
			const data = {
				page: this.page,
				pageSize: 12,
				selectType: this.selectType == 'all' ? null : this.selectType,
				selectMonth: selectMonth,
				selectYear: selectYear
			};
			const path = this.currentIndex == 0 ? '/yahe/account/getMyIncome' : '/yahe/account/getMyExpense';
			this.$post(path, data, '1').then((res) => {
				if (res.success) {
					this.recordList = this.recordList.concat(res.content?.records || []);
					this.page = res.content?.current;
					this.total = res.content?.total;
					this.checkNoMoreData(res);
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},

		// 判断是否无更多数据
		checkNoMoreData(res) {
			const totalPages = Math.ceil(res.content?.total / this.pageSize);
			this.noMoreData = this.page >= totalPages;
		},
		bindDateChange: function (e) {
			uni.showLoading({
				title: '加载中'
			});
			this.date = e.detail.value;
			this.page = 1;
			this.recordList = [];
			this.fetchData();
		},
		checkChange(e) {
			uni.showLoading({
				title: '加载中'
			});
			this.page = 1;
			this.recordList = [];
			this.fetchData();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		}
	}
};
</script>

<style scoped>
.content {
	box-sizing: border-box;
	height: 100%;
}

.loading-status {
	padding: 20rpx;
	text-align: center;
}

.no-more {
	color: #999;
	font-size: 24rpx;
}

.tab-container {
	padding: 40rpx;
	height: 100%;
	box-sizing: border-box;
}
.list-container {
	height: 90%;
}

.tab-headers {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;
}

.tab-header {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 32rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	padding: 20rpx;
	cursor: pointer;
}

.active {
	color: #0a978e;
	border-bottom: 6rpx solid #0a978e;
}

.tab-content {
	line-height: 1.6;
	height: 92%;
}

::v-deep .checklist-group .checklist-box.is--tag.is-checked {
	border-color: transparent !important;
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%) !important;
	border-radius: 8rpx 8rpx 8rpx 8rpx !important;
	color: #fff;
	padding: 20rpx 40rpx;
}

::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag {
	border-color: transparent !important;
	border-radius: 8rpx 8rpx 8rpx 8rpx !important;
	color: #6d6d6d;
	padding: 20rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-right: 8rpx;
}

/* ::v-deep .tab-container {
		padding: 20rpx;
	} */

.record-list-container {
	padding: 30rpx 20rpx;
}

.record-item {
	border-radius: 10rpx;
	padding: 20rpx 0rpx;
	margin-bottom: 10rpx;
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.record-header-text {
	text-align: left;
	font-style: normal;
	text-transform: none;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #3a3a3a;
}

.amount {
	text-align: left;
	font-style: normal;
	text-transform: none;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #ff6737;
}

.amount2 {
	text-align: left;
	font-style: normal;
	text-transform: none;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #b0b0b0;
}

.record-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
}

.status {
	color: #999;
}

.statusLose {
	color: #f02506;
}

.line {
	width: 100%;
	margin: 0 auto;
	margin-top: 20rpx;
	border-bottom: 1rpx solid #efefef;
}

.title-date {
	display: inline-block;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
}

.title-number {
	margin-left: 10px;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #b0b0b0;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.uni-list-cell-db {
	display: block;
	border: 2rpx solid #d1d1d1;
	border-radius: 8rpx;
	padding: 8rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.uni-input {
	display: flex;
	align-items: center;
}
</style>
